﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserHome.aspx.cs" Inherits="AntiObesity.Services.UserHome" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Home</title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<script src="Contents/jquery.js" type="text/javascript"></script>
<script src="Contents/jquery-ui.js" type="text/javascript"></script>
<script src="Contents/jquery-validate.js" type="text/javascript"></script>
<link href="Contents/css/ui-lightness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <span class="home-page">
        <span class="title-buttons">
            <a href="ChangePassword.aspx" >Edit Info</a>&nbsp;.&nbsp;
            <asp:LinkButton ID="btnLogout" runat="server" OnClick="btnLogout_Click">Logout</asp:LinkButton>
        </span>
        <h1>
            Home</h1>
        <span class="summary">Your current weight is
            <asp:Label ID="lblCurrentWeight" runat="server" Text="" /> kg and your height is
            <asp:Label ID="lblCurrentHeight" runat="server" Text="" /> cm (<a href="EditUserInfo.aspx">not? change it</a>)<br />
            <span ID="spnTagetInfo" runat="server" visible="false" >
            You set a target to be <asp:Label ID="lblTargetWeight" runat="server" /> kg <br />
            Based on that your Target BMR is <asp:Label ID="lblTargetBMR" runat="server" /> kcal per day<br />
            </span>
            Your BMR:
            <asp:Label ID="lblBMR" runat="server" Text=""></asp:Label> kcal per day
            <br />            
            <span class="hint">(BMR is the number of calories you'd burn if you stayed in bed all day)</span>
            <br />
            Your BMI:
            <asp:Label ID="lblBMI" runat="server" Text=""></asp:Label><br />
            Remained calories for today:
            <asp:Label ID="lblRemainedCalories" runat="server" Text=""></asp:Label>kcal </span>
            
        <span id="chart_div" style='width: 900px; height: 240px;'></span>
        <span class="buttons">
            <asp:Button ID="btnRecordIntake" runat="server" Text="Record intake" OnClick="btnRecordIntake_Click" />
            <asp:Button ID="btnSetTarget" runat="server" Text="Set a target" OnClick="btnSetTarget_Click" />
            <a href="History.aspx" >What did I eat?</a>
        </span>
    </span>
    </form>
    <script type='text/javascript'>

        google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });

        var chart;
        google.setOnLoadCallback(function() {
            chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
            google.visualization.events.addListener(chart, 'select', selectHandler);
            var query = new google.visualization.Query("UserHomeGraph.ashx");
            query.send(handleQueryResponse);
        });

        function handleQueryResponse(response) {

            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }
            var data = response.getDataTable();
            var now = new Date();
            var tomorrow = new Date(new Date().setDate(now.getDate() + 1));
            var lastWeek = new Date(new Date().setDate(now.getDate() - 7));
            chart.draw(data, {
                'allowHtml': false,
                'scaleColumns': [0, 1],
                'scaleType': 'allmaximized',
                'displayAnnotations': true,
                'zoomStartTime': lastWeek,
                'zoomEndTime': tomorrow
            });
        }

        function selectHandler() {
            //alert('selected');
        }                  
    </script>
</body>
</html>
